<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hightlight Demo</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            top: 1px;
            overflow: hidden;
        }

        #grid {
            width: 5rem;
            height: 3.6rem;
            margin: 1rem auto 0 auto;
            text-align: center;
            background-color: #dddddd;
            /*overflow: hidden;*/
        }

        #grid.fe-focus {
            display: block;
        }

        .grid-item {
            position: relative;
            float: left;
            display: block;
            margin: 0.1rem;
            width: 0.8rem;
            height: 1rem;
            line-height: 1rem;
            background: green;
            font-size: 0.3rem;
            transform: scale3d(1, 1, 1);
        }

        .grid-item.fe-focus {
            background: red;
        }
    </style>
    <script>
        var w = document.documentElement.clientWidth / 10;
        document.getElementsByTagName('html')[0].style['font-size'] = w + 'px';
    </script>
</head>
<body fe-role="Switch">
<div id="grid" class="i-am-a-grid" fe-role="Grid"
     fe-cfg="grid_row:3,grid_col:5,grid_duration:0.3,grid_delay:0.06,grid_origin_size:1,grid_speedup_duratidon:0.2,delay_style:1,no_empty:yes">
    <div class="grid-item" fe-role="Widget">
        <div class='grid-inner'></div>
    </div>
    <!--    <div class="grid-item" fe-role="Widget">-->
    <!--        <div class='grid-inner'></div>-->
    <!--    </div>-->
</div>
<script src="../FocusEngine.min.js"></script>
<script src="../TVUtil.js"></script>
<script>
    var root = FocusEngine.render();
    var grid = root.childWidgets[0];
    var d = [];
    for (var i = 0; i < 200; i++) {
        d.push(i);
    }
    grid.setItemRender(function (dom, item) {
        if (item !== undefined) {
            dom.querySelector('.grid-inner').textContent = JSON.stringify(item);
        } else {
            dom.querySelector('.grid-inner').textContent = '';
        }
    });
    grid.addData(d);

    window.hl = new TVUtil.Highlight({
        widgetId: 'abc', // 可选，组件树中的某个组件的id，仅在该组件focused时才会移动。
        className: 'my-highlight', // 可选，容器类名，默认'highlight'。
        duration: 0.2, // 可选，动画持续时间，默认0.2。
        easing: 'linear', // 可选，缓动算法，默认linear。
        styles: {
            border: 'solid 10px #0000ff'
        }  // styles可选，需要设置的其他css属性，将会覆盖className里的属性。
    });

    grid.on('focus', function (e) {
        console.log('focus:');
        console.log(e);
        console.log(window.hl);
    });
</script>
</body>
</html>
